<template>
  <div class="customers-data">
    <div class="search-content">
      <el-input
        v-model="searchContent.store_name"
        placeholder="请输入经销商名称"
        clearable
        class="input w200"
      ></el-input>
      <el-input v-model="searchContent.mobile" placeholder="客户手机" clearable class="input w200"></el-input>
      <el-input v-model="searchContent.plate" placeholder="车牌号" clearable class="input w200"></el-input>
      <el-input v-model="searchContent.vin" placeholder="车架号" clearable class="input w200"></el-input>

      <!-- <el-date-picker
        v-model="value"
        type="daterange"
        start-placeholder="保险到期时间"
        end-placeholder="保险结束时间"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd"
        @change="changeTime"
      ></el-date-picker>-->

      <el-date-picker
        v-model="searchContent.expire_start_time"
        type="date"
        placeholder="保险到期开始时间"
        value-format="yyyy-MM-dd"
        default-time="00:00:00"
      ></el-date-picker>
      <el-date-picker
        v-model="searchContent.expire_start_end"
        type="date"
        placeholder="保险到期结束时间"
        value-format="yyyy-MM-dd"
        default-time="23:59:59"
      ></el-date-picker>

      <el-select v-model="searchContent.insuranceState" placeholder="所处阶段" clearable>
        <el-option v-for="item in period" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-select v-model="searchContent.insuranceClass" placeholder="客户等级" clearable>
        <el-option v-for="item in level" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </div>
    <div class="logList" style="width:100%;">
      <el-table
        :data="aList"
        border
        style="width: 100%"
        v-loading="loading"
        :height="oHeight"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
      >
        <!-- 遍历表头 -->
        <template v-for="item in tableProp">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :show-overflow-tooltip="true"
            :key="item.prop"
            :render-header="labelHead"
          ></el-table-column>
        </template>
      </el-table>
      <div class="bottom-flex" type="flex">
        <div class="grid-content bg-purple">
          <el-button type="primary" class="exportButton">
            <el-link type="primary" style="color: #fff" :href="href">导出</el-link>
          </el-button>
        </div>
        <pagination
          :arr="aList"
          :total="total"
          :currentPage="currentPage"
          :handleSizeChange="handleSizeChange"
          :handleCurrentChange="handleCurrentChange"
        ></pagination>
      </div>
    </div>
  </div>
</template>

<script>
import pagination from "@/components/pagination/pagination.vue";
import { resize } from "@/common/js/height.js";
import Qs from "qs";
export default {
  data() {
    return {
      href: "",
      loading: false,
      agentName: [], //经销商下拉框
      value: "", // 时间范围
      input: "",
      aList: [],
      oHeight: 800,
      total: 1,
      currentPage: 1,
      searchContent: {
        store_name: "",
        mobile: "",
        vin: "",
        plate: "",
        expire_start_time: "",
        expire_start_end: "",
        insuranceState: "",
        insuranceClass: "",
        is_export: 0
      },
      searchObj: {
        //该变量定义查询传参
        pageSize: localStorage.getItem("eachNum")
          ? parseInt(localStorage.getItem("eachNum"))
          : 10,
        page: 1
      },
      period: [
        {
          label: "续保跟进",
          value: 1
        },
        {
          label: "续保报价",
          value: 2
        },
        {
          label: "续保成交",
          value: 3
        },
        {
          label: "续保战败",
          value: 4
        },
        {
          label: "续保线索",
          value: 5
        }
      ],
      level: [
        {
          label: "新车新保",
          value: 1
        },
        {
          label: "新车续保",
          value: 2
        },
        {
          label: "续保再保",
          value: 3
        },
        {
          label: "续保未保",
          value: 4
        },
        {
          label: "流失客户",
          value: 5
        }
      ],
      downloadLoading: false, // 控制导出按钮
      filename: "保险数据",
      autoWidth: "",
      bookType: "xlsx",
      tableProp: [
        {
          label: "序号",
          prop: "index"
        },
        {
          label: "所属经销商",
          prop: "store_name"
        },
        {
          label: "姓名",
          prop: "userName"
        },
        {
          label: "手机号",
          prop: "mobile"
        },
        {
          label: "所处阶段",
          prop: "insurance_state_name"
        },
        {
          label: "客户类型",
          prop: "insurance_class_name"
        },
        {
          label: "保险到期时间",
          prop: "expireTime"
        },
        {
          label: "上次投保时间",
          prop: "insureTime"
        },
        {
          label: "上次保单生效时间",
          prop: "effectiveTime"
        },
        {
          label: "店保次数",
          prop: "insuranceNums"
        },
        {
          label: "车型",
          prop: "carName"
        },
        {
          label: "车架号",
          prop: "vin"
        },
        {
          label: "车牌号",
          prop: "plate"
        }
      ]
    };
  },
  components: {
    pagination
  },
  watch: {
    aList: {
      deep: true,
      handler() {
        this.href = "";
        let obj = {};
        for (let i in this.searchContent) {
          if (this.searchContent[i]) {
            obj[i] = JSON.parse(JSON.stringify(this.searchContent[i]));
          }
        }
        obj.is_export = 1;
		obj = Qs.stringify(obj);
		let isServer = this.$store.state.isServer;
        if (!isServer) {
          this.href +=
            "http://api.chejj.cn/admin/statistics/index.php?act=insuranceAdminStatistics&op=insuranceList&" +
            obj;
        } else {
          let host = location.origin;
          host = host.replace('admin','api');
          this.href +=
            host +
            "/admin/statistics/index.php?act=insuranceAdminStatistics&op=insuranceList&" +
            obj;
        }
      }
    }
  },
  methods: {
    // 获取列表
    getList() {
      for (let i in this.searchContent) {
        if (this.searchContent[i]) {
          this.searchObj[i] = this.searchContent[i];
        }
      }
      this.loading = true;
      var that = this;
      this.searchObj.page = that.currentPage;
      this.$http
        .post(
          "/admin/statistics/index.php?act=insuranceAdminStatistics&op=insuranceList",
          this.searchObj
        )
        .then(
          res => {
            if (res.code == 1) {
              this.loading = false;
              this.aList = res.data.list;
              this.total = parseInt(res.data.totalCount);
            } else {
              alert(res.msg);
            }
          },
          err => {
            alert(err);
          }
        );
    },
    // 搜索
    search() {
      this.searchObj = {
        //该变量定义查询传参
        pageSize: localStorage.getItem("eachNum")
          ? parseInt(localStorage.getItem("eachNum"))
          : 10,
        page: 1
      };
      this.currentPage = 1;
      this.getList();
    },
    reset() {
      //重置搜索列表
      //1、获取搜索的内容
      this.searchObj = {
        //该变量定义查询传参
        pageSize: localStorage.getItem("eachNum")
          ? parseInt(localStorage.getItem("eachNum"))
          : 10,
        page: 1
      };
      for (let i in this.searchContent) {
        this.searchContent[i] = "";
      }
      this.value = "";
      this.currentPage = 1;
      //2、获取内容列表
      this.getList();
    },
    //每页数据
    handleCurrentChange: function(val) {
      this.currentPage = this.searchObj.page = val;
      /*请求数据*/
      this.getList();
    },
    //分组一页多少数据
    handleSizeChange(val) {
      localStorage.setItem("eachNum", val);
      this.searchObj.pageSize = this.eachNum = val;
      /*请求数据*/
      this.getList();
    },
    // 表头自适应
    labelHead(h, { column, index }) {
      let l = column.label.length;
      let f = 14; //每个字大小，其实是每个字的比例值，大概会比字体大小差不多大一点，
      column.minWidth = f * l + 60; //字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正的长度 //然后将列标题放在一个div块中，注意块的宽度一定要100%，否则表格显示不完全
      return h(
        "div",
        { class: "table-head", slot: "header", style: { width: "100%" } },
        [column.label]
      );
    },
    changeTime(value) {
      this.searchObj.expire_start_end = value[1];
      this.searchObj.expire_start_time = value[0];
    }
  },
  created() {
    //页面刷新就执行
    resize(this);
    this.getList();
  }
};
</script>

<style scoped lang="scss">
.exportButton {
  margin-top: 10px;
  margin-left: 10px;
}
.bottom-flex {
  display: flex;
  justify-content: space-between;
}
</style>
